<template>
	<view class="all">
		<view class="detile">
			<img :src='detileList.img' />
			<view class="price">
				<view class="price-item">
					劵后价<text
						class="newprice">￥{{Math.round((infoList.salePrice-infoList.couponValue)*10)/10}}</text>
					<text class='saleprice'>￥{{infoList.salePrice}}</text>
				</view>

				<text class="pay-count">已售{{infoList.saleQty}}</text>
			</view>
			<view class="good-name">

				<text class="pay-name"><text class="pay-type">
						{{detileList.itemMarketType}}</text>{{detileList.goodsName}}
				</text>
			</view>
			<view class="good-pay" @click="get(detileList.coupon_click_url)">
				<view class="pay" >
					<view class="convalue"  >

						<text >{{infoList.couponValue}}元劵</text>
						<text>有效期至 {{infoList.couponEndTime}}</text>

					</view>

					<view class="get"  >
						立即领劵
					</view>

					<view class="left">

					</view>
					<view class="right">

					</view>
				</view>

			</view>

		</view>
		<view class="shop">
			<view class="shop-item">
				<img src="" alt="">
				<view class="name">
					{{detileList.shopName}}
					<text class="pay-type">
						{{detileList.itemMarketType}}</text>

				</view>
				<view class="desc">
					<text class="desc-item">宝贝描述 {{detileList.presale_deposit}}
						<text
							class="mark">{{detileList.presale_deposit<=0?'平' : detileList.presale_deposit>3 ? '优' : '良'}}</text>
					</text>
					<text class="desc-item">卖家服务 {{ detileList.presale_discount_fee}}
						<text
							class="mark">{{detileList.presale_discount_fee<=0?'平' : detileList.presale_discount_fee>3 ? '优' : '良'}}</text>
					</text>
					<text class="desc-item">物流服务 {{detileList.ysyl_tlj_face}}
						<text
							class="mark">{{detileList.ysyl_tlj_face<=0?'平' : detileList.ysyl_tlj_face>3 ? '优' : '良'}}</text>
					</text>
				</view>
			</view>
		</view>
		<view class="extra-title">
			-商品推荐-
		</view>
		<view class="extra">
			<view class="extra-item" v-for="(r,i ) in extreList.recommendGoodsList"
				:class="{'pay-left':i %2 ==0 || i==0}" :key="i" @click="godetile(r.itemId)">

				<img class="extra-img" :src="r.img" alt="">

				<view class="pay-top">

					<text class="pay-name"><text class="pay-type">{{r.itemMarketType}}</text>{{r.goodsName}}</text>
				</view>
				<view class="pay-middle">
					<view>
						<text class="newprice">￥{{Math.round((r.salePrice-r.couponValue)*10)/10}}</text>
						<text class="saleprice">￥{{r.salePrice}}</text>
					</view>
					<text class="pay-count">已售{{r.saleQty}}</text>
				</view>
				<view class="pay-bottom">
					<view class="convalue">{{r.couponCondition}}元劵
						<view class="left">

						</view>
						<view class="right">

						</view>
					</view>

					<text class="shop-name">{{r.shopName}}</text>
				</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detileList: [],
				infoList: [],
				extreList:[]
			}
		},
		methods: {

			getData() {
				uni.request({
					url: `https://appfly.cn/api/daogouGoods/goodsDetailV3?itemId=${this.id}`,
					header: {
						cookie: 'easyweb=2001; target=blank; navbar=0; count=20; verCode=1211; appPackage=cn.appfly.cookbook; lang=zh-CN; token=; __gads=ID; __gpi=UID',
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.detileList = res.data.data
						this.extreList = res.data.extra
					}
				});
			},
			getextData() {
				uni.request({
					url: `https://appfly.cn/api/daogouGoods/goodsExtraInfo?itemId=${this.id}`,
					header: {
						cookie: 'easyweb=2001; target=blank; navbar=0; count=20; verCode=1211; appPackage=cn.appfly.cookbook; lang=zh-CN; token=; __gads=ID; __gpi=UID',
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.infoList = res.data.data
						// console.log(this.infoList);
					}
				});
			},
			get(url){
				let urls= encodeURIComponent(url)
				      uni.navigateTo({
				        url: `/pages/outlet/outlet?url=` + urls
				      })
				
			},
			godetile(id){
				
					uni.navigateTo({
						url: `/pages/paydetile/paydetile?id=${id}`
					})
				
			}

		},
		mounted() {
			this.getData(),
			this.getextData()
			// console.log(this.time);
		},
		onLoad(options) {
			this.id = options.id;
			this.getData()
			uni.setNavigationBarTitle({
				title: ''
			});
		}
	}
</script>

<style lang="scss">
	.all {
		background-color: rgba(153, 153, 153, 0.2);
		
		.detile {
			background-color: white;
			height: 450px;

			.price {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				color: #999;
				padding: 5px 12px;

				.newprice {
					color: red;
					font-size: 18px
				}

				.saleprice {
					text-decoration: line-through;
				}

				.pay-count {
					line-height: 30px;
				}
			}

			.good-name {
				width: 93vw;
				padding: 0 12px;
				font-size: 14px;
				// margin-bottom: 20px;

				.pay-type {
					background-color: red;
					color: white;
					font-size: 12px;
					display: inline-block;
					width: 30px;
					text-align: center;
					border-radius: 4px;
					margin-right: 5px;
				}

			}

			.good-pay {
				width: 93vw;
				padding: 0 12px;
				
				// z-index:999;
				.pay {
					font-size: 12px;
					margin-top: 20px;
					padding: 0 20px;
					display: flex;
					justify-content: space-between;
					height: 60px;
					line-height: 60px;
					color: #fff;
					background-color: red;
					position: relative;
					border-radius: 8px;
					z-index: 999;

					.convalue {
						display: flex;
						flex-direction: column;
						line-height: 30px;
						text-align: center;
						
					}
					.get{
						position: absolute;
						right: 20px;
					}
					
					.left {
						position: absolute;
						left: -10px;
						top: 50%;
						transform: translateY(-50%);
						background-color: #fff;
						width: 20px;
						height: 20px;
						border-radius: 999px;
					}
					.right{
						position: absolute;
						right: -10px;
						top: 50%;
						background-color: #fff;
						transform: translateY(-50%);
						width: 20px;
						height: 20px;
						border-radius: 999px;
					}
				}
			}
		}

		.shop {
			height: 80px;
			width: 100vw;
			margin: 10px 0;
			background-color: #fff;
			position: relative;
			font-size: 12px;

			

			.shop-item {
				height: 100px;
				width: 100vw;
				position: absolute;
				top: -220px;
				.name {
					display: flex;
					flex-direction: column;
					margin-bottom: 10px;
					margin-left: 20px;

					.pay-type {
						background-color: red;
						color: white;
						font-size: 12px;
						display: inline-block;
						width: 30px;
						text-align: center;
						border-radius: 4px;
						margin-right: 5px;
					}
				}

				.desc {
					display: flex;
					justify-content: space-around;

					.mark {
						font-size: 10px;
						background-color: rgba(153, 153, 153, 0.5);
						border-radius: 2px;
						width: 10px;
						height: 10px;
						margin-left: 5px;
					}
				}
			}
		}

		.extra-title {
			width: 100vw;
			height: 50px;
			padding: 10px 0;
			background-color: #fff;
			text-align: center;
			line-height: 50px;
			border-bottom: 1px solid rgba(153, 153, 153, 0.2);
		}

		.extra {
			padding: 10px 12px;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			font-size: 13px;

			.extra-item {
				flex: 0 0 48%;
				height: 300px;

				&.pay-left {
					margin-right: 4%;
				}

				.extra-img {
					width: 100%;
					height: 150px;
				}

				.pay-top {
					width: 100%;
					height: 30px;

					.pay-type {
						background-color: red;
						color: white;
						font-size: 12px;
						display: inline-block;
						width: 30px;
						text-align: center;
						border-radius: 4px;
						margin-right: 5px;
					}

					.pay-name {
						display: inline-block;
						height: 30px;
						width: 130px;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

					}
				}

				.pay-middle {
					display: flex;
					justify-content: space-between;
					font-size: 10px;
					color: #999;

					.newprice {
						color: red;
						font-size: 18px
					}

					.saleprice {
						text-decoration: line-through;
					}

					.pay-count {
						line-height: 30px;
					}
				}

				.pay-bottom {
					display: flex;
					flex-direction: column;
					color: #999;
					font-size: 12px;


					.convalue {
						background-color: red;
						width: 75px;
						height: 20px;
						line-height: 20px;
						font-size: 11px;
						border-radius: 6px;
						text-align: center;
						color: white;
						position: relative;
						margin-bottom: 10px;

						.left {
							position: absolute;
							left: -5px;
							top: 50%;
							transform: translateY(-50%);
							background-color: #fff;
							width: 10px;
							height: 10px;
							border-radius: 999px;
						}

						.right {
							position: absolute;
							right: -5px;
							top: 50%;
							background-color: #fff;
							transform: translateY(-50%);
							width: 10px;
							height: 10px;
							border-radius: 999px;
						}
					}


				}
			}
		}
	}
</style>
